///引入共享头部
import '../../../common/shard.dart';

import 'package:snapping_sheet/snapping_sheet.dart';

class SnappingSheetPage extends StatelessWidget {
	SnappingSheetPage({Key? key}) : super(key: key);

	final ScrollController _scrollController = ScrollController();

	@override
	Widget build(BuildContext context) {
		return CustomCupertinoScaffold(
			body: SnappingSheet(
				lockOverflowDrag: true,
				child:Container(
					color: Colors.grey[200],
				),
				grabbingHeight: 80,
				grabbing: GrabbingWidget(),
				snappingPositions: const [
					SnappingPosition.factor(
					positionFactor: 0.0,
					snappingCurve: Curves.easeOutExpo,
					snappingDuration: Duration(milliseconds: 300),
					grabbingContentOffset: GrabbingContentOffset.top,
					),
					SnappingPosition.factor(
					snappingCurve: Curves.elasticOut,
					snappingDuration: Duration(milliseconds: 1750),
					positionFactor: 0.5,
					),
					SnappingPosition.factor(
					grabbingContentOffset: GrabbingContentOffset.bottom,
					snappingCurve: Curves.elasticOut,
					snappingDuration: Duration(milliseconds: 1750),
					positionFactor: 0.9,
					),
				],
				sheetBelow: SnappingSheetContent(
					draggable: true,
					sizeBehavior:const SheetSizeFill(),
					childScrollController: _scrollController,
					child: Container(
						color: Colors.white,
					  child: ListView(
					  	controller: _scrollController,
					  	reverse: false,
					  	children: [
					  		for (var item in [10,20,30,40,50,60,70,80,90,100])
					  		Container(
					  			height: 100,
					  			child: Center(
					  				child: Text('$item'),
					  			),
					  		)
					  	],
					  ),
					),
				),
			)
		);
	}
}

class GrabbingWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
        boxShadow: [
          BoxShadow(blurRadius: 25, color: Colors.black.withOpacity(0.2)),
        ],
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Container(
            margin: EdgeInsets.only(top: 20),
            width: 100,
            height: 7,
            decoration: BoxDecoration(
              color: Colors.grey,
              borderRadius: BorderRadius.circular(5),
            ),
          ),
        ],
      ),
    );
  }
}
